<template>
    <div>
        <a-modal
        title="选择要绑定的合同"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :width="800"
        >
            <div class="selectContractModal-box" v-if="visible">
                <commpVxeTable
                    :key="dataTableKey"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="formItem"
                    :conditionBtnRow="true"
                    ref="selectContractModalRef"
                    @radioChange="checkboxChange"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    :isCanWrap="true"
                    :selectItem="selectItem"
                    >
                </commpVxeTable>
            </div>
        </a-modal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {jcyfybxdsaveSelectBxry,} from './service/index'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            dataTableKey:null,
            formItem:[
                {
                    label: '合同名称',
                    model: 'fhtmc',
                },
            ],//
            columnsVxe:[{
                type: 'radio',
                width: 60 ,
                fixed: 'left'
            },{
                title: '合同名称', //列头显示文字
                field: 'fhtmc',
            },{
                title: '中标供应商名称', //列头显示文字
                field: 'fzbgysmc',
            },{
                title: '合同金额',
                field: 'fhtje',

            },{
                title: '采购方式', //列头显示文字
                field: 'fcgfs',
            }],
            dataTableConfig:{
                api: assessCheckApi.htxcdPage,
                rowId: 'id',
                autoHidden:true,
                height:window.innerHeight - 400,
                pageSize:10000,
                urlType: true,
                paramet:{ }
            },
            selectedRowKeysArrId:[],
            selectedRowKeysArrName:[],
            formState:{},
            selectItem:{},
        }
    },
    watch:{

    },
    mounted(){


    },
    methods:{
        getData(row){
            this.formState = row
            // this.dataTableConfig.paramet = {...row,idArr:''}
            // this.selectItem = {
            //     selectArr:row.idArr,
            //     key:'id',
            // }
            this.dataTableKey = Date.now()
            this.visible = true
        },
        checkboxChange(val){
            //console.log(val.newValue)
            this.selectedRowKeysArrId = ''
            this.selectedRowKeysArrName = ''
            if(val.newValue){
                this.selectedRowKeysArrId = val.newValue.id
                this.selectedRowKeysArrName= val.newValue.fhtmc
            }
        },
        searchEvent(){
        },
        resetEvent(){
        },
        handleOk(){
            if(this.selectedRowKeysArrId.length){
                this.$emit('getApplicantData',{id:this.selectedRowKeysArrId,name:this.selectedRowKeysArrName})
                this.visible = false
            }else{
                this.$message.warning('请选择合同')
            }
        },
        handleCancel(){
            this.visible = false
        }
    }
}
</script>
<style lang="less">
.reimbursement-selectPersonnel-box{

}
.full-modal-selectPersonnel{
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }
    .ant-modal-body {
        flex: 1;
        padding:8px 0;
    }
}
</style>
